<template>
<view class="skeleton page">
    <view class="skeleton-type-title">
    </view>
    <view class="skeleton-graph"></view>
    <view class="skeleton-answercard">
        <view class="skeleton-answercard-title"></view>
        <view class="skeleton-answercard-content">
            <view class="skeleton-answercard-content-item" v-for="(item,index) in examResult" :key="index">
            </view>
        </view>
    </view>
    <view class="skeleton-knowledge">
        <view class="skeleton-knowledge-title"></view>
        <view class="skeleton-knowledge-content" v-for="(item,index) in exam" :key="index">
            <view class="skeleton-knowledge-content-img"></view>
            <view class="skeleton-knowledge-content-right"></view>
        </view>
    </view>

    <view class="skeleton-btn">
        <view class="btn-left">
        </view>
        <view class="btn-right">
        </view>
    </view>
</view>
</template>

<script>
    export default {
        name:'result',
        data(){
            return{
                examResult:[{},{},{},{},{}],
                exam:[{},{}]
            }
        }

    }
</script>

<style lang='scss' scoped>
    .skeleton {
        position: fixed;
        height: 100%;
        overflow: hidden;
        box-sizing: border-box;
        background: #fff;
        width: 100%;
    }

    .skeleton-type-title {
        height: 88upx;
        width:70%;
        margin:20upx;
        background:#eee;
    }

    .skeleton-graph {
        height: 354upx;
        border-radius: 8upx;
        margin: 0 20upx;
        background:#eee;
    }

    .skeleton-answercard {
        width: 100%;

        &-title {
            width:30%;
            height: 50upx;
            margin: 60upx 20upx 0 20upx;
            background:#eee;
        }

        &-content {
            width: 710upx;
            border-radius: 15upx;
            padding: 0 5upx;
            margin: 20upx 0;

            &-item {
                display: inline-block;
                width: 60upx;
                height: 60upx;
                margin: 20upx 40upx;
                background: #eee;
                border-radius: 50%;
            }
        }
    }

    .skeleton-knowledge {
        widht: 100%;
        padding: 0 20upx;

        &-title {
            width: 50%;
            height: 60upx;
            margin: 20upx 0;
            background:#eee;
        }

        &-content {
            height: 120upx;
            padding: 20upx 0;

            &-right {
                height: 100upx;
                width:70%;
                display: inline-block;
                background:#eee;
            }

            &-img {
                display: inline-block;
                width: 26upx;
                height: 26upx;
                margin-right: 6upx;
                margin-top: 6upx;
                vertical-align: top;
                background:#eee;
            }

        }
    }

    .skeleton-btn {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 80upx;

        &-left {
            display: inline-block;
            width: 50%;
            height: 100%;
            background:#eee;
        }

        &-right {
            display: inline-block;
            width: 50%;
            height: 100%;
            background:#eee;
        }

    }
</style>